<script setup lang="ts">
	import { reactive, ref } from "vue";
	import wContainer from '@/uni_modules/simple-waterfall/components/simple-waterfall/w-container.vue'
	import wItem from '@/uni_modules/simple-waterfall/components/simple-waterfall/w-item.vue'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		getCurrentInstance
	} from 'vue'
	onReachBottom(() => {
		console.log('chudi');
		page.value += 1
		getNews()
	})
	const router = useRouter()
	const {
		proxy,
	} = getCurrentInstance();
	let searchWord = ref('')
	let page = ref(1)
	let newsList = reactive({
		data: []
	})
	const getNews = () => {
		proxy.$req('GET', proxy.$api.getNews, {
			pageNo: page.value,
			pageSize: 14,
			title: searchWord.value
		}).then((res) => {
			console.log(res);
			if (res.code != 200) {
				uni.showToast({
					title: res.message,
					icon: "none"
				})
				return
			}
			newsList.data = newsList.data.concat(res.result.records)
		})
	}
	getNews()
	const search = (e) => {
		// if (!e) {
		// 	uni.showToast({
		// 		title: '搜索词不能为空',
		// 		icon: 'none'
		// 	})
		// 	return
		// }
		page.value = 1
		newsList.data = []
		getNews()
	}
	const routerLink = (id) => {
		router.push({
			name: 'newsDetail',
			params: {
				id,
			}
		})
	}
</script>
<template>
	<view class="navbar">
		<u-navbar :placeholder="true" leftText="" title="" auto-back>
			<template #center>
				<view style="width:622rpx;margin-left: 60rpx;">
					<u-search placeholder="请输入关键词" v-model="searchWord" shape="square" :showAction="true"
						@search="search"></u-search>
				</view>
			</template>
		</u-navbar>
	</view>
	<view class="contentBox">
		<view class="cbItem" v-for="(item,index) in newsList.data" :key="index" @click="routerLink(item.id)">
			<image class="itemImg" :src="item.images" mode=""></image>
			<view class="itemTit u-line-2">
				{{ item.title }}
			</view>
			<view class="itemTime">
				<text>{{ item.source }}</text>
				<text>{{ item.createTime }}</text>
			</view>
		</view>
		<!-- <wContainer :columnNumber="2">
			<wItem class="cbItem" v-for="(item, index) in newsList.data" :key="index" @click="routerLink(item.id)">
				<view class="">
					<image class="itemImg" :src="item.images" mode=""></image>
					<view class="itemTit ">
						{{ item.title }}
						<text v-if="item.title=='阿松大'"> 阿松大阿斯阿松大阿斯顿萨达俺得打赏顿asdasads萨达俺得打赏</text>
					</view>
					<view class="itemTime">
						<text>{{ item.source }}</text>
						<text style="margin-top: 14rpx;">{{ item.createTime }}</text>
					</view>
				</view>
			</wItem>
		</wContainer> -->
	</view>
	<view class="" style="margin-top: 150rpx;" v-if="newsList.data.length<1">
		<u-empty mode="search" icon="/static/images/noSearch.png">
		</u-empty>
	</view>
</template>
<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.navbar {
		width: 100%;
		height: 100rpx;
	}

	.contentBox {
		width: calc(100% - 64rpx);
		padding: 0 32rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;


		.cbItem {
			width: 328rpx;
			height: 470rpx;
			margin: 15rpx 0;
			background-color: #fff;
			padding-bottom: 20rpx;
			border-radius: 10rpx;

			.itemImg {
				width: 328rpx;
				height: 328rpx;
			}

			.itemTit {
				font-size: 24rpx;
				height: 60rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				padding: 0 16rpx;
				margin-top: 6rpx;
			}

			.itemTime {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.65);
				padding: 0 16rpx;
				margin-top: 14rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
			}
		}
	}
</style>